<template>
  <a-image
    :alt="alt"
    :fallback="fallback"
    :height="height"
    :placeholder="placeholder"
    :preview="preview"
    :src="src"
    :preview-mask="previewMask"
    :width="width"
    @error="error"
  >
    <template v-if="$slots.placeholder" #placeholder>
      <slot name="placeholder" />
    </template>
    <template v-if="$slots.previewMask" #previewMask>
      <slot name="previewMask" />
    </template>
    <slot />
  </a-image>
</template>

<script>
import { defineComponent } from 'vue'
import { Image } from 'ant-design-vue'
export default defineComponent({
  name: 'ZImage',
  components: {
    AImage: Image
  },
  props: {
    alt: {
      type: String,
      default: undefined
    },
    fallback: {
      type: String,
      default: undefined
    },
    height: {
      type: [String, Number],
      default: undefined
    },
    placeholder: {
      type: Boolean,
      default: undefined
    },
    preview: {
      type: [Boolean, Object],
      default: undefined
    },
    src: {
      type: String,
      default: undefined
    },
    previewMask: {
      type: [Function, Boolean],
      default: false
    },
    width: {
      type: [String, Number],
      default: undefined
    }
  },
  methods: {
    error(e) {
      this.$emit('error', e)
    }
  }
})
</script>
